<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
        <meta charset="UTF-8">
        <title>商品列表</title>
        <!-- jquery -->
        <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
        <!-- bootstrap -->
        <link rel="stylesheet" type="text/css"
              th:href="@{/bootstrap/css/bootstrap.min.css}"/>
        <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}">
        </script>
        <!-- layer -->
        <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
        <!-- common.js -->
        <script type="text/javascript" th:src="@{/js/common.js}"></script>

        <!--网页的图标-->
        <link rel="icon" th:href="@{/images/favicon2.ico}">
        <!--全局样式-->
        <link rel="stylesheet" th:href="@{/css/reset.css}">
        <!--字体图标-->
        <link rel="stylesheet" th:href="@{/css/iconfont.css}">
        <!--自己的样式-->
        <link rel="stylesheet" th:href="@{/css/mi.css}">
</head>
<body>
<!--头部开始-->
<div class="header">
  <div class="wrap">
    <ul class="header-left">
      <li><a href="/goods/toList">tilitili商城</a><span>|</span></li>
      <li><a href="#">云服务</a><span>|</span></li>
      <li><a href="#">开放平台</a><span>|</span></li>
      <li><a href="#">企业团购</a><span>|</span></li>
      <li><a href="#">资质证照</a><span>|</span></li>
      <li><a href="#">协议规则</a><span>|</span></li>
      <li>
        <a href="#">下载app</a><span>|</span>
        <div class="download">
          <a href="#">
            <img src="/images/logo-mi2.png" alt="">
            <p>tilitili商城APP</p>
          </a>
        </div>
        <div class="triangle"></div>
      </li>
      <li><a href="#">智能生活</a></li>
    </ul>
    <ul class="header-right">
      <li th:if="${user eq null}"><a href="/login/toLogin">未登录，请先登录</a><span></span><span>|</span></li>
      <li class="cart" th:if="${user ne null}" id="user">
        <a th:text="${user.nickname}"></a>
        <div class="cart-list">
          昵称：<a th:text="${user.nickname}"></a>
          <br/>
          手机号码：<a th:text="${user.id}"></a>
          <br/>
          收货地址：<a th:text="${user.address}"></a>
          <br/>
          <a href="/order/orderall">全部订单</a>
        </div>
        <span></span>
        <span></span>
        <span>|</span>
      </li>
      <li><a href="/register/toregister">注册</a><span>|</span></li>
      <li class="cart">
        <a href="#">
          消息通知（0）
        </a>
        <div class="cart-list">
          当前没有消息！！！
        </div>
      </li>
      <li class="cart">
        <a href="#">
          <i class="iconfont">&#xe653;</i>
          购物车（0）
        </a>
        <div class="cart-list">
          购物车为空，赶快添加商品吧！
        </div>
      </li>
    </ul>
  </div>
</div>
<!--头部结束-->

<!--导航开始-->
<div class="nav">
  <div class="wrap">
    <div class="logo">
      <a href="#">
        <img src="/images/logo-mi2.png" alt="">
      </a>
    </div>
    <div class="nav-bar">
      <ul>
        <li>
          <a href="#">手机</a>
          <div class="nav-bar-list">
            <div class="wrap">
              <ul th:each="goods,goodsStat : ${goodsList}">
                <li th:if="${goods.goodsCategory} eq '手机'">
                  <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                    <div class="img-box">
                      <img th:src="@{${goods.goodsImg}}" alt="">
                    </div>
                    <p class="name1" th:text="${goods.goodsName}"></p>
                    <p class="price1" th:text="${goods.goodsPrice}"></p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <a href="#">水果</a>
          <div class="nav-bar-list">
            <div class="wrap">
              <ul th:each="goods,goodsStat : ${goodsList}">
                <li th:if="${goods.goodsCategory} eq '水果'">
                  <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                    <div class="img-box">
                      <img th:src="@{${goods.goodsImg}}" alt="">
                    </div>
                    <p class="name1" th:text="${goods.goodsName}"></p>
                    <p class="price1" th:text="${goods.goodsPrice}"></p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <a href="#">电视</a>
          <div class="nav-bar-list">
            <div class="wrap">
              <ul th:each="goods,goodsStat : ${goodsList}">
                <li th:if="${goods.goodsCategory} eq '电视'">
                  <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                    <div class="img-box">
                      <img th:src="@{${goods.goodsImg}}" alt="">
                    </div>
                    <p class="name1" th:text="${goods.goodsName}"></p>
                    <p class="price1" th:text="${goods.goodsPrice}"></p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <a href="#">平板</a>
          <div class="nav-bar-list">
            <div class="wrap">
              <ul th:each="goods,goodsStat : ${goodsList}">
                <li th:if="${goods.goodsCategory} eq '平板'">
                  <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                    <div class="img-box">
                      <img th:src="@{${goods.goodsImg}}" alt="">
                    </div>
                    <p class="name1" th:text="${goods.goodsName}"></p>
                    <p class="price1" th:text="${goods.goodsPrice}"></p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="#">家电</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">智能硬件</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
      </ul>
    </div>
    <div class="search">
      <input type="text">
      <a href="#" class="iconfont">&#xe63d;</a>
      <div class="search-list">
        <a href="#">水果</a>
        <a href="#">手机</a>
        <a href="#">平板</a>
        <a href="#">纪念品</a>
        <a href="#">电视</a>
      </div>
    </div>
  </div>
</div>
<!--导航结束-->

<!--banner开始-->
<div class="banner">
  <div class="wrap">
    <div class="banner-box">

    </div>
    <div class="slide">
      <ul>
        <li>
          <a href="#">手机<i class="iconfont">&#xe658;</i></a>
          <div class="slide-list">
            <ul th:each="goods,goodsStat : ${goodsList}">
              <li th:if="${goods.goodsCategory} eq '手机'">
                <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                  <div class="img-box">
                    <img th:src="@{${goods.goodsImg}}" alt="">
                  </div>
                  <p class="name1" th:text="${goods.goodsName}"></p>
                  <p class="price1" th:text="${goods.goodsPrice}"></p>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">水果<i class="iconfont">&#xe658;</i></a>
          <div class="slide-list">
            <ul th:each="goods,goodsStat : ${goodsList}">
              <li th:if="${goods.goodsCategory} eq '水果'">
                <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                  <div class="img-box">
                    <img th:src="@{${goods.goodsImg}}" alt="">
                  </div>
                  <p class="name1" th:text="${goods.goodsName}"></p>
                  <p class="price1" th:text="${goods.goodsPrice}"></p>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">电视<i class="iconfont">&#xe658;</i></a>
          <div class="slide-list">
            <ul th:each="goods,goodsStat : ${goodsList}">
              <li th:if="${goods.goodsCategory} eq '电视'">
                <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                  <div class="img-box">
                    <img th:src="@{${goods.goodsImg}}" alt="">
                  </div>
                  <p class="name1" th:text="${goods.goodsName}"></p>
                  <p class="price1" th:text="${goods.goodsPrice}"></p>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#">平板<i class="iconfont">&#xe658;</i></a>
          <div class="slide-list">
            <ul th:each="goods,goodsStat : ${goodsList}">
              <li th:if="${goods.goodsCategory} eq '平板'">
                <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                  <div class="img-box">
                    <img th:src="@{${goods.goodsImg}}" alt="">
                  </div>
                  <p class="name1" th:text="${goods.goodsName}"></p>
                  <p class="price1" th:text="${goods.goodsPrice}"></p>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li><a href="#">笔记本<i class="iconfont">&#xe658;</i></a></li>
        <li><a href="#">手表<i class="iconfont">&#xe658;</i></a></li>
        <li><a href="#">手环<i class="iconfont">&#xe658;</i></a></li>
        <li><a href="#">显示器<i class="iconfont">&#xe658;</i></a></li>
        <li><a href="#">智能硬件<i class="iconfont">&#xe658;</i></a></li>
        <li><a href="#">纪念品<i class="iconfont">&#xe658;</i></a></li>
      </ul>

    </div>
    <div class="prev"></div>
    <div class="next"></div>
  </div>
</div>
<!--banner结束-->

<!--广告开始-->
<div class="adv">
  <div class="wrap">
    <div class="adv-aside">
      <ul>
        <li class="row col">
          <a href="">
            <i class="iconfont">&#xe733;</i>
            <p>会员卡</p>
          </a>
        </li>
        <li class="row col">
          <a href="">
            <i class="iconfont">&#xe733;</i>
            <p>会员卡</p>
          </a>
        </li>
        <li class="row">
          <a href="">
            <i class="iconfont">&#xe733;</i>
            <p>会员卡</p>
          </a>
        </li>
        <li class="col">
          <a href="">
            <i class="iconfont">&#xe733;</i>
            <p>会员卡</p>
          </a>
        </li>
      </ul>
    </div>
    <div class="adv-img">
      <a href="#">
        <img src="/images/guanggao1.png" alt="">
      </a>
    </div>
    <div class="adv-img">
      <a href="#">
        <img src="/images/guanggao1.png" alt="">
      </a>
    </div>
    <div class="adv-img">
      <a href="#">
        <img src="/images/guanggao1.png" alt="">
      </a>
    </div>
  </div>
</div>
<!--广告结束-->

<!--主体开始-->
<div class="container">
  <div class="wrap">
    <!--手机开始-->
    <div class="phone">
      <div class="home-banner-box">
        <a href="#">
          <img src="/images/wrap1.png" alt="">
        </a>
      </div>
      <h2 class="title">手机
        <a href="#" class="more">查看更多 <i class="iconfont">&#xe616;</i></a>
      </h2>
      <div class="home-box">
        <div class="home-box-left home-box-left1">
          <a href="#">
            <img src="/images/wrap2.png" alt="">
          </a>
        </div>
        <div class="home-box-right">
          <ul th:each="goods,goodsStat : ${goodsList}">
            <li class="items" th:if="${goods.goodsCategory} eq '手机'">
              <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                <img th:src="@{${goods.goodsImg}}" alt="" class="img1">
                <p class="name2" th:text="${goods.goodsName}"></p>
                <p class="desc2" th:text="${goods.goodsDetail}"></p>
                <p class="price2" th:text="${goods.seckillPrice}"></p>
                <p>
                  原价： <p class="pdel" th:text="${goods.goodsPrice}"></p>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--手机结束-->
    <!--水果开始-->
    <div class="ele">
      <div class="home-banner-box">
        <a href="#">
          <img src="/images/wrap1.png" alt="">
        </a>
      </div>
      <h2 class="title">水果</h2>
      <div class="home-box">
        <div class="home-box-left">
          <ul>
            <li class="items">
              <a href="#">
                <img src="/images/wrap3.png" alt="">
              </a>
            </li>
            <li class="items">
              <a href="#">
                <img src="/images/wrap3.png" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="home-box-right">
          <ul th:each="goods,goodsStat : ${goodsList}">
            <li class="items" th:if="${goods.goodsCategory} eq '水果'">
              <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                <img th:src="@{${goods.goodsImg}}" alt="" class="img1">
                <p class="name2" th:text="${goods.goodsName}"></p>
                <p class="desc2" th:text="${goods.goodsDetail}"></p>
                <p class="price2" th:text="${goods.seckillPrice}"></p>
                <p>
                  原价： <p class="pdel" th:text="${goods.goodsPrice}"></p>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--水果结束-->
    <!--电视开始-->
    <div class="ele">
      <div class="home-banner-box">
        <a href="#">
          <img src="/images/wrap1.png" alt="">
        </a>

      </div>
      <h2 class="title">电视</h2>
      <div class="home-box">
        <div class="home-box-left">
          <ul>
            <li class="items">
              <a href="#">
                <img src="/images/wrap3.png" alt="">
              </a>
            </li>
            <li class="items">
              <a href="#">
                <img src="/images/wrap3.png" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="home-box-right">
          <ul th:each="goods,goodsStat : ${goodsList}">
            <li class="items" th:if="${goods.goodsCategory} eq '电视'">
              <a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">
                <img th:src="@{${goods.goodsImg}}" alt="" class="img1">
                <p class="name2" th:text="${goods.goodsName}"></p>
                <p class="desc2" th:text="${goods.goodsDetail}"></p>
                <p class="price2" th:text="${goods.seckillPrice}"></p>
                <p>
                  原价： <p class="pdel" th:text="${goods.goodsPrice}"></p>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--电视结束-->
  </div>
</div>
<!--主体结束-->

<!--页脚开始-->
<div class="footer">
  <div class="site-footer">
    <div class="wrap">
      <div class="footer-service">
        <ul>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              <span>15天免费换货</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              <span>15天免费换货</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              <span>15天免费换货</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              <span>15天免费换货</span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="iconfont">&#xe606;</i>
              <span>15天免费换货</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="footer-links">
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <ul>
          <li>
            帮助中心
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
          <li>
            <a href="#">账户管理</a>
          </li>
        </ul>
        <div class="contact">
          <p class="tel">000-000-1111</p>
          <p class="time">8:00-18:00（仅收市话费）</p>
          <a href="#" class="kefu">
            <i class="iconfont">&#xe710;</i>
            人工客服
          </a>
          <p class="follow">
            关注tilitili：
            <span class="wb"></span>
            <span class="wx"></span>
            <img src="/images/favicon2.ico" alt="" class="wx-img">
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="site-info">
    <div class="wrap">
      <div class="footer-logo">
        <img src="/images/logo-mi2.png" alt="">
      </div>
      <div class="sites">
        <p>
          <a rel="nofollow" href="/goods/toList" target="_blank">tilitili商城</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="#" target="_blank">tilitili隐私政策</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="#" target="_blank">tilitili儿童信息保护规则</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="#" target="_blank">tilitili商城隐私政策</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="#" target="_blank">tilitili商城用户协议</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="#" target="_blank">问题反馈</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank">中国消费者协会</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
        </p>
        <p>
          违法和不良信息举报电话：000-0000-0000&nbsp;<a href='#' target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
        </p>
        <p>
          <img src="/images/truste.png" alt="">
          <img src="/images/truste.png" alt="">
          <img src="/images/truste.png" alt="">
          <img src="/images/truste.png" alt="">
          <img src="/images/truste.png" alt="">
        </p>
      </div>
      <img src="images/slogan2020.png" alt="" class="slogan">
    </div>
  </div>
</div>
<!--页脚结束-->

<!--<div class="panel panel-default">-->
<!--  <div class="panel-heading">秒杀商品列表</div>-->
<!--  <table class="table" id="goodslist">-->
<!--    <tr>-->
<!--      <td>商品名称</td>-->
<!--      <td>商品图片</td>-->
<!--      <td>商品原价</td>-->
<!--      <td>秒杀价</td>-->
<!--      <td>库存数量</td>-->
<!--      <td>商品类别</td>-->
<!--      <td>详情</td>-->
<!--    </tr>-->
<!--    <tr th:each="goods,goodsStat : ${goodsList}">-->
<!--      <td th:text="${goods.goodsName}"></td>-->
<!--      <td><img th:src="@{${goods.goodsImg}}" width="100" height="100"/>-->
<!--      </td>-->
<!--      <td th:text="${goods.goodsPrice}"></td>-->
<!--      <td th:text="${goods.seckillPrice}"></td>-->
<!--      <td th:text="${goods.stockCount}"></td>-->
<!--      <td th:text="${goods.goodsCategory}"></td>-->
<!--      <td><a th:href="'/goodsDetail.htm?goodsId='+${goods.id}">详情</a></td>-->
<!--    </tr>-->
<!--  </table>-->
<!--</div>-->
</body>
</html>